<template>
  <v-card>
        <v-card-title>
      <!--搜索框，与search属性关联-->
      <v-layout wrap vertical>
        <el-row>
          <el-input
            :size="small"
            placeholder="流水号"
            style="width: 145px;"
            class="filter-item"
            v-model="listQuery.lsh"
            @keyup.enter.native="handleFilter"
          />
          <el-input
            placeholder="货号"
            style="width: 145px;"
            class="filter-item"
            v-model="listQuery.hh"
          />
          <el-select
            placeholder="品类"
            :size="small"
            v-model="listQuery.plbm"
            clearable
            style="width: 200px"
            class="filter-item"
          >
            <el-option
              v-for="item in pls"
              :key="item.plbm"
              :label="item.plmc+'('+item.plbm+')'"
              :value="item.plbm"
            />
          </el-select>
          <el-select
            placeholder="店铺"
            v-model="listQuery.storecode"
            clearable
            style="width: 200px"
            class="filter-item"
          >
            <el-option
              v-for="item in stores"
              :key="item"
              :label="item.display_name+'('+item.key+')'"
              :value="item.key"
            />
          </el-select>
          <el-select
            placeholder="仓库"
            v-model="listQuery.storagecode"
            clearable
            style="width: 200px;"
            class="filter-item"
          >
            <el-option
              v-for="item in storages"
              :key="item.key"
              :label="item.display_name+'('+item.key+')'"
              :value="item.key"
            />
          </el-select>

          <el-select
            placeholder="区域"
            v-model="listQuery.deptCode"
            clearable
            style="width: 200px;"
            class="filter-item"
          >
            <el-option
              v-for="item in depts"
              :key="item.key"
              :label="item.display_name+'('+item.key+')'"
              :value="item.key"
            />
          </el-select>

          <!-- <v-text-field label="输入关键字搜索" v-model.lazy="search" append-icon="search" hide-details /> -->
        </el-row>
        <v-layout row wrap>
          <v-flex xs2>
            <el-date-picker
              v-model="listQuery.strq"
              type="date"
              placeholder="起始日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </v-flex>
          <v-flex xs1>
            <el-date-picker
              v-model="listQuery.torq"
              type="date"
              placeholder="终止时间"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </v-flex>
          <v-flex xs8></v-flex>
          <v-flex xs1>
            <el-button type="primary" @click="handleFilter">查询</el-button>
          </v-flex>
        </v-layout>
      </v-layout>
    </v-card-title>
    <v-divider />

   <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="Orders"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="流水号" width="135px" align="center" >
        <template slot-scope="{row}">
          <span>{{ row.lsh }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="70px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.statusInfo }}</span>
        </template>
      </el-table-column>

      <el-table-column label="货号" width="70px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.hh }}</span>
        </template>
      </el-table-column>

      <el-table-column label="品名" width="90px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.pinm }}</span>
        </template>
      </el-table-column>
      <el-table-column label="数量" width="70px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.sl }}</span>
        </template>
      </el-table-column>
      <el-table-column label="型号" width="90px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.xingh }}</span>
        </template>
      </el-table-column>
      <el-table-column label="类型" width="50px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.lxInfo }}</span>
        </template>
      </el-table-column>

      <el-table-column label="店铺" width="100px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.storeName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="仓库" width="100px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.storageName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="联系人" width="70px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.contact }}</span>
        </template>
      </el-table-column>

      <el-table-column label="电话" width="110px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="地址"  min-width="110px"   align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.location }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="80" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.rows"
      @pagination="getList"
    />

    <!--弹出的对话框-->
    <el-dialog :title="预览" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :inline="true" :model="temp" label-position="left">
        <el-row>
          <el-col :span="6">
            <el-form-item size="small" label="流水号" prop="lsh">
              <el-input v-model="temp.lsh" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item size="small" label="销售日期" prop="xsrq">
              <el-input v-model="temp.lrsj" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item size="small" label="货号" prop="hh">
              <el-input v-model="temp.hh" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item size="small" label="品名" prop="pinm">
              <el-input v-model="temp.pinm" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item size="small" label="型号" prop="xingh">
              <el-input v-model="temp.xingh" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item size="small" label="数量" prop="sl">
              <el-input v-model="temp.sl" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item size="small" label="联系人" prop="sl">
              <el-input v-model="temp.contact" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item size="small" label="联系电话" prop="sl">
              <el-input v-model="temp.phone" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item size="small" label="期望送货时间" prop="sl">
              <el-input v-model="temp.qwsj" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item size="large" label="地址" prop="location">
              <el-input v-model="temp.location"  style="width:300px" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item size="small" label="销售人" prop="truename">
              <el-input v-model="temp.truename" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item size="small" label="销售店铺" prop="storeName">
              <el-input v-model="temp.storeName" />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item size="small" label="仓库" prop="storageName">
              <el-input v-model="temp.storageName" />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item size="small" label="品类" prop="plmc">
              <el-input v-model="temp.plmc" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item size="small" label="状态" prop="lrusername">
              <el-input v-model="temp.statusInfo" />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item size="small" label="司机" prop="storeName">
              <el-input v-model="temp.driverName" />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item size="small" label="司机电话" prop="ckbm">
              <el-input v-model="temp.driverPhone" />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item size="small" label="送达时间" prop="plmc">
              <el-input v-model="temp.sdsj" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </v-card>
</template>

<script>
// 导入自定义的表单组件
import waves from "@/directive/waves"; // waves directive
import { parseTime } from "@/utils";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination

// arr to obj, such as { CN : "China", US : "USA" }

export default {
  name: "OrderReturn",
  data() {
    return {
      Orders: [], // 当前页路线数据pagexs
      listLoading: false,
      tableKey: 0,
      list: null,
      total: 0,
      storages: [
        { key: "0025", display_name: "锦州百货大楼" },
        { key: "0195", display_name: "锦州千盛" }
      ],
      stores: [
        { key: "0025", display_name: "锦州百货大楼" },
        { key: "0195", display_name: "锦州千盛" }
      ],
      pls: [],
      listQuery: {
        page: 1,
        rows: 10,
        hh: "",
        plbm: "",
        strq: '',
        torq: '',
        lsh: "",
        storagecode: "",
        storecode: "",
        type: "TH"
      },
      temp: {
        id: undefined,
        importance: 1,
        remark: "",
        timestamp: new Date(),
        title: "",
        type: "",
        status: "published"
      },
      dialogFormVisible: false,
      downloadLoading: false
    };
  },

  watch: {},

  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "info",
        deleted: "danger"
      };
      return statusMap[status];
    },
    typeFilter(type) {
      return calendarTypeKeyValue[type];
    }
  },
  created() {
    this.getpl();
    this.getList();
  },
  methods: {
    getpl() {
      this.$http
        .get("/item/item/pl", {
          params: {}
        })
        .then(resp => {
          // 这里使用箭头函数
          this.pls = resp.data;
        });
    },
    getList() {
      this.listLoading = true;

      let now = new Date();
      if (this.listQuery.strq === "") {
        this.listQuery.strq =
          // now.getFullYear()-1 + '-' + now.getMonth()+1 + '-' + now.getDate();
          now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
      }
      if (this.listQuery.torq === "") {
        this.listQuery.torq =
          now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
      }

      this.$http
        .get("/item/report/xsthlist", {
          params: {
            ...this.listQuery,
            uid: window.localStorage.getItem("id")
          }
        })
        .then(resp => {
          // 这里使用箭头函数
          this.Orders = resp.data.items;
          this.total = resp.data.total;
          // 完成赋值后，把加载状态赋值为false
          this.loading = false;
        })
        .catch(
          e => ((this.Orders = []), (this.total = 0), (this.loading = false))
        );

      // Just to simulate the time of the request
      setTimeout(() => {
        this.listLoading = false;
      }, 1.5 * 1000);
    },

    handleUpdate(row) {
      this.temp = Object.assign({}, row); // copy obj

      /////
      this.$http
        .get("/item/report/xsthdetail?lsh=" + row.lsh, {})
        .then(resp => (this.temp = resp.data));

      this.temp.timestamp = new Date(this.temp.timestamp);
      this.dialogStatus = "update";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },

    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },

    handleModifyStatus(row, status) {
      this.$message({
        message: "操作Success",
        type: "success"
      });
      row.status = status;
    },
    sortChange(data) {
      const { prop, order } = data;
      if (prop === "id") {
        this.sortByID(order);
      }
    },
    sortByID(order) {
      if (order === "ascending") {
        this.listQuery.sort = "+id";
      } else {
        this.listQuery.sort = "-id";
      }
      this.handleFilter();
    },

    handleDownload() {
      // this.downloadLoading = true;
      // import("@/vendor/Export2Excel").then(excel => {
      //   const tHeader = ["timestamp", "title", "type", "importance", "status"];
      //   const filterVal = [
      //     "timestamp",
      //     "title",
      //     "type",
      //     "importance",
      //     "status"
      //   ];
      //   const data = this.formatJson(filterVal, this.list);
      //   excel.export_json_to_excel({
      //     header: tHeader,
      //     data,
      //     filename: "table-list"
      //   });
      //   this.downloadLoading = false;
      // });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === "timestamp") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    }
  },
  components: {
    Pagination
  }
};
</script>

<style scoped>
</style>
